<template>
	<view class="emptyBox">
		<image class="emptyImage" :src="image" mode="aspectFit"></image>
		<text class="tip1">{{ title }}</text>
		<text class="tip2">{{ tip }}</text>
		<view class="btn" @click="btnclick">{{ btnText }}</view>
	</view>
</template>

<script>
	export default {
		name: "m-empty",
		data() {
			return {

			};
		},
		props: {
			image: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			tip: {
				type: String,
				default: ''
			},
			btnText: {
				type: String,
				default: ''
			}
		},
		methods: {
			btnclick() {
				this.$emit('btnClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.emptyBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;

		.emptyImage {
			margin-top: 60rpx;
			width: 300rpx;
			height: 300rpx;
		}

		.tip1 {
			margin-top: 80rpx;
			font-size: 24rpx;
		}

		.tip2 {
			margin-top: 20rpx;
			color: #aaa;
			font-size: 24rpx;
		}

		.btn {
			margin-top: 70rpx;
			width: 500rpx;
			height: 80rpx;
			border-radius: 80rpx;
			background-color: #f05948;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
		}
	}
</style>